<template>
    <div class="content-wrapper">
        <el-row class="content-row">
            <el-col class="height-init cityTree" :span="3">
                <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
            </el-col>
            <el-col class="height-init" :span="21">
                <div class="container">
                    <el-row class="handle-box">
                        <el-input v-model="query.title" placeholder="标题" class="handle-input mr10"></el-input>
                        <el-date-picker
                                v-model="query.time"
                                type="datetimerange"
                                range-separator="至"
                                @change="dateChange"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                style="width:380px"
                                :default-time="['00:00:00', '23:59:59']">
                        </el-date-picker>

                        <el-select style="width: 100px" v-model="query.status" class="mr10 ml10" clearable
                                   placeholder="请选择活动状态">
                            <el-option
                                    v-for="item in activityStatusOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>

                        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                        <el-button type="primary" icon="el-icon-plus" class="handle-del" @click="reSetForm">重置
                        </el-button>
                        <el-button v-if="checkAuth(auths.add)" type="primary" icon="el-icon-plus" class="handle-del"
                                   @click="addActity">新增
                        </el-button>

                    </el-row>
                    <el-row class="list-table-row">
                        <el-table
                                :data="tableData"
                                border
                                class="table"
                                ref="multipleTable"
                                height="100%"
                                width="100%"
                                header-cell-class-name="table-header"
                                @selection-change="handleSelectionChange"
                        >
                            <el-table-column type="selection" width="55" align="center"></el-table-column>
                            <el-table-column type="index" width="50" align="center" label="序号"></el-table-column>
                            <el-table-column prop="title" label="标题" width="200px" show-overflow-tooltip/>
                            <el-table-column prop="activityType" width="120px" label="活动类型" align="center">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.activityType == 1">广告图文类</span>
                                    <span v-if="scope.row.activityType == 2">现场活动类</span>
                                    <span v-if="scope.row.activityType == 3">线上报名类</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="cityName" label="生效城市" show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <span v-if="scope.row.scope===1">全国</span>
                                    <span v-if="scope.row.scope===2">{{scope.row.cityName}}</span>
                                </template>
                            </el-table-column>

                            <el-table-column label="当前状态" width="100px" align="center">
                                <template slot-scope="scope">
                                    <!--                                    <span v-if="scope.row.status == 0">草稿</span>-->
                                    <!--                                    <span v-if="scope.row.status == 2">已失效</span>-->
                                    <!--                                    <span v-if="scope.row.status == 1">-->
                                    <!--                                        <span v-if="scope.row.activityStartTime<=new Date().getTime() && scope.row.activityEndTime>=new Date().getTime()">活动中</span>-->
                                    <!--                                        <span v-if="scope.row.activityType != 1 && scope.row.applyStartTime > new Date().getTime()">未开始</span>-->
                                    <!--                                        <span v-if=" scope.row.activityEndTime < new Date().getTime()">已结束</span>-->
                                    <!--                                        <span v-if="scope.row.activityType != 1 && scope.row.applyEndTime !=null && scope.row.applyEndTime<new Date().getTime() && scope.row.activityStartTime > new Date().getTime()">活动待开始</span>-->
                                    <!--                                        <span v-if="scope.row.activityType == 1  && scope.row.activityStartTime >= new Date().getTime()">活动待开始</span>-->
                                    <!--                                        <span v-if="scope.row.activityType != 1 && scope.row.applyEndTime >= new Date().getTime() && scope.row.applyStartTime<new Date().getTime() &&scope.row.activityStartTime>=new Date().getTime()">报名中</span>-->

                                    <!--                                      </span>-->

                                    <span v-if="scope.row.status == 0">草稿</span>
                                    <span v-if="scope.row.status == 1">未开始</span>
                                    <span v-if="scope.row.status == 2">报名中</span>
                                    <span v-if="scope.row.status == 3">活动待开始</span>
                                    <span v-if="scope.row.status == 4">活动中</span>
                                    <span v-if="scope.row.status == 5">已结束</span>

                                    <span v-if="scope.row.status == 6">已失效</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="applyNum" label='报名人数' width="100px" show-overflow-tooltip/>
                            <el-table-column prop="activityStartTime" width="200px" label="活动开始时间">
                                <template slot-scope="scope">
                                    {{renderTime(scope.row.activityStartTime)}}
                                </template>
                            </el-table-column>
                            <el-table-column prop="activityEndTime" width="200px" label="活动结束时间">
                                <template slot-scope="scope">
                                    {{renderTime(scope.row.activityEndTime)}}
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="240" align="center" fixed="right">
                                <template slot-scope="scope">
                                    <el-button v-if="checkAuth(auths.detail)" type="text" size="small"
                                               @click="viewDetail(scope.row)">详情
                                    </el-button>
                                    <el-button
                                            v-if="checkAuth(auths.applyDetail) && (scope.row.status=== 2|| scope.row.status===3||scope.row.status===4||scope.row.status===5 ) && scope.row.activityType != 1"
                                            type="text" icon="el-icon-edit"
                                            @click="handleApply(scope.$index, scope.row)">报名详情
                                    </el-button>
                                    <el-button v-if="checkAuth(auths.edit) && scope.row.status != 6 " type="text"
                                               icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑
                                    </el-button>
                                    <el-button type="text" v-if="checkAuth(auths.delete) && scope.row.status===0"
                                               icon="el-icon-delete" @click="handleDelete(scope.$index, scope.row)">删除
                                    </el-button>

                                    <el-button @click="handleDown(scope.$index, scope.row)" type="text"
                                               icon="el-icon-edit"
                                               v-if="checkAuth(auths.updateStatus) && (scope.row.status===1 ||scope.row.status===2||scope.row.status===3||scope.row.status===4 )">
                                        下架
                                    </el-button>

                                </template>
                            </el-table-column>
                        </el-table>
                    </el-row>
                    <el-row class="pagination-self">
                        <el-pagination
                                background
                                layout="total, sizes, prev, pager, next"
                                :current-page="query.pageNo"
                                :page-size="query.pageSize"
                                :total="pageTotal"
                                @size-change="handleSizeChange"
                                @current-change="handlePageChange"
                        ></el-pagination>
                    </el-row>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    // import { fetchList, updateAdvertise } from '../../../../api/advertise'
    // import { getMoreSpace } from '../../../../api/advertiseSpace'
    import {getCityTree} from '../../../api/city'
    import {deleteActivity, getPage, updateStatus} from '../../../api/activity/activity'


    export default {
        name: 'activityList',
        data() {
            return {
                activityStatusOptions: [{
                    value: '0',
                    label: '草稿'
                }, {
                    value: '1',
                    label: '未开始'
                }, {
                    value: '2',
                    label: '报名中'
                }, {
                    value: '3',
                    label: '活动待开始'
                }, {
                    value: '4',
                    label: '活动中'
                }, {
                    value: '5',
                    label: '已结束'
                }, {
                    value: '6',
                    label: '已失效'
                }],
                query: {
                    pageNo: 1,
                    pageSize: 20,
                    cityCode: '',
                },
                tableData: [],
                multipleSelection: [],
                pageTotal: 0,
                spaces: [],
                statusOptions: [{
                    value: '0',
                    label: '草稿'
                }, {
                    value: '2',
                    label: '已下架'
                }, {
                    value: '3',
                    label: '上架中'
                }, {
                    value: '4',
                    label: '等待上架'
                }, {
                    value: '5',
                    label: '已结束'
                }],
                data: [],
                defaultProps: {
                    children: 'children',
                    label: 'name',
                    isLeaf: 'leaf'
                }
            };
        },
        activated() {
            console.log("activated---------->")
            this.getData();
            this.getCityTree();
        },
        created() {
            console.log("create---------->")
            this.getData();
            // this.getMoreSpace();
            this.getCityTree();
        },
        props: ['auths'],

        methods: {
            reSetForm() {
                this.query = {};
                this.query.pageNo = 1;
                this.query.pageSize = 20;
                this.query.cityCode = ''
                this.getData();
            },
            //活动详情
            viewDetail(row) {
                this.addTag('福利活动详情', '/activity/detail/' + row.id, 'activityDetail');
            },
            /**
             * 获取城市树
             */
            getCityTree() {
                console.log("--->进来了获取城市树")
                getCityTree().then(res => {
                    console.log(res.data);
                    this.data = res.data;
                })
            },
            /**
             * 获取坑位
             */
            // getMoreSpace(){
            //     getMoreSpace({type:1,category:1}).then(res=>{
            //         this.spaces = res.data;
            //     })
            // },
            /**
             * 点击树
             */
            handleNodeClick(data) {
                this.query.cityCode = data.code;
                this.getData();
            },
            /**
             * 获取列表
             */
            getData() {
                getPage(this.query).then(res => {
                    this.tableData = res.data.records;
                    this.pageTotal = res.data.total || 50;
                });
            },
            /**
             * 新增活动
             */
            addActity() {
                this.addTag('福利活动添加', '/activity/add', 'advertiseAdd')
            },
            // 触发搜索按钮
            handleSearch() {
                this.$set(this.query, 'pageNo', 1);
                this.getData();
            },
            // 删除操作
            handleDelete(index, row) {
                // 二次确认删除
                this.$confirm('确定要删除吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    deleteActivity({id: row.id, operation: 'deleted'}).then(res => {
                        if (res.code == '0') {
                            this.$message.success('删除成功');
                            this.getData();
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'error'
                            });
                        }
                    });
                }).catch(() => {
                });
            },
            //下架操作
            handleDown(index, row) {
                // 二次确认下架
                this.$confirm('确定要下架吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    updateStatus({id: row.id, status: 6, operation: 'obtained'}).then(res => {
                        if (res.code == '0') {
                            this.$message.success('下架成功');
                            this.getData();
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'error'
                            });
                        }
                    });
                }).catch(() => {
                });
            },
            // 多选操作
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            // 编辑操作
            handleEdit(index, row) {
                this.addTag('福利活动编辑', '/activity/edit/' + row.id, 'activityEdit');
            },
            // 编辑操作
            handleApply(index, row) {
                this.addTag('福利活动报名详情', '/activity/apply/' + row.id, 'activityApply');
            },
            // 分页导航
            handlePageChange(val) {
                this.$set(this.query, 'pageNo', val);
                this.getData();
            },
            handleSizeChange(val) {
                this.$set(this.query, 'pageSize', val);
                this.getData();
            }, dateChange(val) {
                if (val != null && val !== undefined && val.length > 0) {
                    this.query.startTime = new Date(val[0]).getTime();
                    this.query.endTime = new Date(new Date(val[1]).setHours(23, 59, 59)).getTime();
                } else {
                    this.query.startTime = null;
                    this.query.endTime = null;
                }
            }
        }
    };
</script>

<style scoped>

    .content-wrapper {
        height: 100%;
        overflow-y: hidden;
    }

    .content-row {
        height: 100%;
    }

    .cityTree {
        overflow-y: scroll;
    }

    .height-init {
        height: 100%;
    }

    .container {
        height: 100%;
    }

    .handle-box {
        height: 6.5%;
    }

    .handle-input {
        width: 120px;
        display: inline-block;
    }

    .list-table-row {
        height: 83%;
    }

    .table {
        width: 100%;
        height: 100%;
        font-size: 14px;
    }

    .red {
        color: #ff0000;
    }

    .mr10 {
        margin-right: 10px;
    }

    .ml10 {
        margin-left: 10px;
    }

    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }

    .pagination-self {
        height: 10%;
        text-align: right;
        margin-top: 5px;
    }
</style>
